<template>
  <div>
    <!-- 标题 -->
    <van-nav-bar :title="$route.name" left-arrow @click-left="$router.back()"/>
    <!-- 地址 -->
    <div class="adress">
      <!-- <van-address-list @add="onAdd" /> -->
      <p>
        <span>新增地址</span>
      </p>
    </div>
    <!-- 商品 -->
    <div>
      <main>
        <ul>
          <li v-for="(item,idx) in orderlist" :key="item.id">
            <input type="checkbox" v-model="item.checked">
            <img :src="item.img">
            <div>
              <p>{{item.goodsname}}</p>
              <p>
                桔色果汁[20#]
                <span class="iconfont">&#xe601;</span>
              </p>
              <p>
                ￥
                <span>{{item.price.toFixed(2)}}</span>距离加入降￥5.00
              </p>
              <p>
                <button @click="sub(idx)" type="button">-</button>
                <span>{{item.num}}</span>
                <button @click="add(idx)" type="button">+</button>
                <span class="iconfont">&#xe663;</span>
              </p>
            </div>
          </li>
        </ul>
      </main>
    </div>
    <div class="box">
      <van-cell title="发票类型" is-link/>
      <van-cell title="售后免邮" is-link/>
      <van-cell title="买家留言" is-link/>
    </div>
    <div id="total">
      <div class="left">
        <input @change="checkAll" type="checkbox" v-model="allcheck">
        <p>全选</p>
      </div>
      <div>合计：￥{{allPrice}}</div>
      <div class="right">立即结算</div>
    </div>
  </div>
</template>

<script>
import {getOrderlist} from "../request/api"
export default {
  data() {
    return {
      allcheck: false,
      orderlist: [
        {
          id: 1,
          goodsname: "溪牧原山茶花洁面泡沫 氨基...",
          img:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp314207052.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637828969&t=8a06fb00f4d2657e1fc31a08c8719893",
          price: 99,
          num: 1,
          checked: false
        },
        {
          id: 2,
          goodsname: "溪牧原山茶花洁面泡沫 氨基...",
          img:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp314207052.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637828969&t=8a06fb00f4d2657e1fc31a08c8719893",
          price: 199,
          num: 1,
          checked: false
        },
        {
          id: 3,
          goodsname: "溪牧原山茶花洁面泡沫 氨基...",
          img:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp314207052.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637828969&t=8a06fb00f4d2657e1fc31a08c8719893",
          price: 299,
          num: 1,
          checked: false
        }
      ]
    };
  },
  // beforeRouteEnter(to, from, next) {
  //   if (sessionStorage.getItem("userinfo")) {
  //     next();
  //   } else {
  //     //无登录状态，强制调转到登录页
  //     next("/login");
  //   }
  // },
  mounted() {
    //组件一加载就调用 订单列表接口
    getOrderlist({
      uid:this.$store.getters.getUser.uid,
      countmoney:this.countmoney,
      countnumber:this.countnumber,
      addressid:this.addressid,
      idstr:this.idstr
    }).then(res=>{
      console.log(res,"订单列表")
    })
  },
  computed: {
    allPrice() {
      let sum = 0;
      this.orderlist.map(item => {
        if (item.checked) {
          sum += item.price * item.num;
        }
      });
      return sum.toFixed(2);
    }
  },
  watch: {
    //监听商品数组的变化
    orderlist: {
      deep: true,
      handler() {
        console.log("正在开启监听模式");
        this.allcheck = this.orderlist.every(item => item.checked);
      }
    }
  },
  methods: {
    //封装一个全选事件
    checkAll() {
      console.log(this.allcheck, "全选状态");
      //当全选选中每一个单选都选中
      this.orderlist.map(item => {
        item.checked = this.allcheck;
      });
    },
    //删除事件
    del(i) {
      this.orderlist.splice(i, 1);
    },
    sub(i) {
      if (this.orderlist[i].num <= 1) {
        this.orderlist[i].num = 2;
      }
      this.orderlist[i].num--;
    },
    //封装一个数量累加事件
    add(i) {
      this.orderlist[i].num++;
    }
  }
};
</script>

<style scoped>
.box {
  margin-bottom: 200px;
}
.van-nav-bar {
  background: #ff6040;
  height: 50px;
  color: #fff;
}
.adress {
  width: 100%;
  height: 100px;
  background: #ff6040;
  padding-top: 5px;
}
.adress p {
  width: 90%;
  height: 120px;
  background: #fff;
  margin: 0 auto;
  text-align: center;
  line-height: 120px;
  border-radius: 5px;
}
.adress p span {
  font-size: 20px;
  color: #fff;
  background: lightcoral;
}
main {
  height: 100%;
  margin-bottom: 30px;
}
main ul {
  margin-top: 20px;
  background: #ffffff;
  padding: 0 2px;
}
main ul .cur span {
  color: #ff6040;
}
main ul li {
  height: 150px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
main ul li > span {
  color: #333;
  margin-right: 2px;
}
main ul li img {
  width: 100px;
  height: 100px;
  margin-right: 2px;
}
main ul li div {
  height: 150px;
}
main ul li div :nth-child(1) {
  font-size: 16px;
  color: #333333;
}
main ul li div :nth-child(2) {
  width: 120px;
  height: 30px;
  font-size: 14px;
  color: #959595;
  text-align: center;
  line-height: 30px;
  margin-top: 10px;
}
main ul li div :nth-child(3) {
  font-size: 14px;
  color: #ff6040;
}
main ul li div :nth-child(3) span {
  font-size: 14px;
  color: #ff6040;
}
main ul li div :nth-child(4) {
  height: 30px;
  font-size: 14px;
  color: #333333;
  position: relative;
}
main ul li button {
  width: 25px;
  height: 25px;
  border: none;
}
#total {
  width: 100%;
  height: 100px;
  background: #ffffff;
  border-top: 1px solid #cccccc;
  box-sizing: border-box;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: fixed;
  left: 0;
  bottom: 0;
  background: lightsalmon;
}
#total .left {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80px;
  margin-left: 10px;
}
#total .left > p {
  font-size: 20px;
  color: #333333;
}
#total .right{
  width: 100px;
  height: 50px;
  background: lightgray;
  text-align: center;
  line-height: 50px;
  border-radius: 5px;
}
</style>
